<template>
	<view class="form">
		<view class="form-main">
			<view class="opt">
				<input v-model="account" type="text" placeholder="请输入QQ邮箱" class="inp">
			</view>
			<view class="opt">
				<input v-model="user" type="text" placeholder="请输入用户名" class="inp">
			</view>
			<view class="opt">
				<input v-model="password" type="password" placeholder="请输入密码" class="inp">
			</view>
			<view class="opt">
				<input v-model="password2" type="password" placeholder="请确认密码" class="inp">
			</view>

			<view class="opt opt-2">
				<input v-model="codeNum" type="text" class="inp-2">
				<view class="butt" @click="sendMailFn">{{tipText}}</view>
			</view>


			<view class="opt">
				<view class="button" @click="registerFn">点击注册</view>
			</view>
			<view class="opt" style="text-align: center;">
				<view>更多登录方式</view>
			</view>
			<view class="opt">
				<navigator url="/pages/login/login" style="color: #666;">已有有账号,跳转登录</navigator>
			</view>
		</view>
	</view>
</template>
<script>
	// 创建db对象
	const db = uniCloud.database();
	// 获取 `tt_users` 集合的引用
	const usersCollection = db.collection('tt_users');
	const captchasCollection = db.collection('tt_captchas');

	export default {
		data() {
			return {
				tipText: "点击发送验证码", // 点击发生邮箱验证码
				mail: "", //测试
				delay: null,
				isSend: true,
				// 采集表单信息
				user: "",
				account: "",
				password: "",
				password2: "",
				codeNum: ""
			}
		},
		methods: {
			async sendMailFn() {
				if (!(/\w+@qq\.com/.test(this.account))) {
					uni.showToast({
						title: "请输入邮箱格式的账号",
						icon: "none"
					})
					return false;
				}

				if (this.delay != null) {
					uni.showToast({
						title: "验证码已发送",
						icon: "none"
					})
					clearTimeout(this.delay)
					return false;
				}

				if (this.isSend) {
					this.isSend = false;
					let that = this;
					await uniCloud.callFunction({
							name: "mailqq",
							data: {
								email: that.account
							}
						})
						.then(
							resData => {
								console.log(111, resData);
								this.tipText = "已发送，60s重新发"
							}
						)
						.catch(err => {
							console.log(222, err)
						})
				}

				this.delay = setTimeout(() => {
					this.isSend = true;
					captchasCollection.where({
						email: this.account,
						codeNum: this.codeNum
					}).remove()
				}, 60 * 1000)
			},
			// 编写注册的方法
			async registerFn() {
				if (this.codeNum == "" || this.user == "" || this.account == "" || this.password == "" || this
					.password2 == "") {
					uni.showToast({
						title: "输入框不能为空",
						icon: "none"
					})
					return false;
				}
				// abc@qq.com
				// 12345@qq.com
				if (!(/\w+@qq\.com/.test(this.account))) {
					uni.showToast({
						title: "请输入邮箱格式的账号",
						icon: "none"
					})
					return false;
				}

				if (this.password != this.password2) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "none"
					})
					return false;
				}

				// 判断验证码是否正确 
				let res = await captchasCollection.where({
					email: this.account,
					codeNum: this.codeNum
				}).get()
				console.log("验证的结果:", res);
				if (res.result.data && res.result.data.length == 0) {
					uni.showToast({
						title: "验证码错误",
						icon: "none"
					})
					return false;
				}

				// 调用注册云函数
				await uniCloud.callFunction({
						name: "register",
						data: {
							account: this.account,
							user: this.user,
							password: this.password
						}
					})
					.then(
						resData => {
							console.log(resData);
							if (resData.result.code == 200) {
								// uni.showToast({
								// 	title: "注册成功"
								// })

								uni.showModal({
									title: "提示,注册成功",
									content: "是否跳转登录",
									success() {
										uni.navigateTo({
											url: "/pages/login/login"
										})
									}
								})

							} else {
								uni.showToast({
									title: resData.result.msg,
									icon: "none"
								})
							}

						}
					)
					.catch(err => {
						console.log(err)
					})
			},

		},
	}
</script>

<style lang="scss">
	@import "../../static/scss/variable.scss";

	.form {
		padding: $padd;
	}

	.form-main {
		height: 800rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;



		.opt {
			width: 100%;
			margin-bottom: 20rpx;

			.inp {
				width: 100%;
				height: 80rpx;
				border-bottom: 1px solid #ccc;
			}

			.button {
				padding: 15rpx;
				border: 1px solid #ccc;
				text-align: center;
				border-radius: 10rpx;
			}
		}

		.opt-2 {
			display: flex;
			margin-bottom: 20rpx;

			.inp-2 {
				width: 280rpx;
				height: 60rpx;
				border-bottom: 2rpx solid #ccc;
				text-align: center;
			}

			.butt {
				text-align: center;
				color: #666;
			}
		}
	}
</style>